iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0

在上一篇文章,我介紹了何謂元素。而這篇文章要介紹何謂屬性。

何謂屬性

屬性的作用就是告訴網頁瀏覽器如何處理html元素,它們可以用來設定元素的樣式、連結到其他頁面、傳遞資料等。
而今天我會介紹一些常用的屬性

1.class=""

class屬性用於為一個或多個元素指定一個或多個CSS類,以便對其套用相同的樣式規則。這有助於將樣式套用到多個元素。

<div class="container">
    <p class="highlight">这是一个段落。</p>
</div>
<div class="container">
    <p>这是另一个段落。</p>
</div>

2.id=""

它用於為特定的HTML元素提供一個唯一的識別碼或名稱。這個標識符是頁面上唯一的,不能用於多個元素,每個元素只能有一個id屬性。至於它可以做出何種操作

1. javascript

id屬性常在JavaScript中用來定位和操作特定的HTML元素。透過JavaScript,您可以使用document.getElementById("yourId")來取得具有特定id屬性值的元素,並對其進行各種操作,例如修改內容、樣式或新增事件處理程序

2.css

雖然通常使用class屬性來套用樣式,但您也可以使用id屬性來為單一元素套用特定的樣式規則。這通常不如class靈活,因為它只應用於一個元素,但在某些情況下仍然有用。

3.herf

定義超連結的目標URL,用於a元素。

4.style

在html的元素上直接指定內容樣式,假設引入的是一張圖片,就可以透過style調整width、height、color、margin、padding等等,若只有一兩個數值需要調整就可以使用style,不用再透過css調整

<img src="example.png" style="width: 50px; height: 50px;">

5.type=""

設定資源的內容類型,在引入css時會用到

<link rel="stylesheet" type="text/css" herf="example.css">

6.disabled

停用輸入欄位或按鈕,通常用於表單元素。

7.title

為HTML元素提供有關信息,通常在滑鼠懸停時顯示。

HTML的屬性是網頁設計的關鍵元素之一。它們讓我們能夠控制和定義內容的外觀和行為。無論您是初學者還是有經驗的開發者,深入了解和掌握這些屬性都是建立精彩網頁的必備技能。


上一篇
DAY4元素
下一篇
DAY6 CSS入門
系列文
網頁設計之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言